<template>
  <div>
    <h2>Home组件</h2>
  <!-- 编程式路由导航 -->
  <button @click="toNews">新闻</button>
  <button @click="toMusic">音乐</button>
  <button @click="toGame">游戏</button>
  <!-- home中的二级路由出口 -->
  <!-- 在路由中使用keep-alive include和exclude的值是组件的name属性 -->
  <keep-alive include="News">
    <router-view></router-view>
  </keep-alive>
  </div>
</template>

<script>
export default {
name:"Home",
methods:{
    toNews(){
        this.$router.push(
            "/Home/News",
            ()=>{},
            ()=>{}
        )
    },
     toMusic(){
        this.$router.push({
            name:"Music",
        }
        ).catch(()=>{})
    },
    toGame(){
        this.$router.push({
            path:"Game"
        }).catch(()=>{})
    }
}
}
</script>

<style scoped>
.active{
    background: yellow;
}
</style>